<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-preview-main">
      <div class="JNPF-common-page-header">
        <p>金融机构注册</p>
        <div class="options">
          <el-button type="primary" @click="dataFormSubmit()">提交申请</el-button>
          <el-button @click="clearData">重置</el-button>
        </div>
      </div>
      <el-row :gutter="15" class=" main" :style="{ margin: '0 auto', width: '100%' }">
        <el-form ref="formRef" :model="dataForm" :rules="dataRule" size="small" label-width="100px"
          label-position="top">
          <template v-if="!loading">
            <!-- 具体表单 -->
            <el-col :span="24">
              <jnpf-form-tip-item label="金融机构名称" prop="companyName">
                <JnpfInput v-model="dataForm.companyName" @change="changeData('companyName', -1)" placeholder="请输入"
                  clearable :style='{ "width": "100%" }'>
                </JnpfInput>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="24">
              <jnpf-form-tip-item label="金融机构类型" prop="serverType">
                <JnpfSelect v-model="dataForm.serverType" @change="changeData('serverType', -1)" placeholder="请选择"
                  clearable :style='{ "width": "100%" }' :options="serverTypeOptions" :props="serverTypeProps">
                </JnpfSelect>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="24">
              <jnpf-form-tip-item label="金融机构信用代码" prop="enterpriseCreditCode">
                <JnpfInput v-model="dataForm.enterpriseCreditCode" @change="changeData('enterpriseCreditCode', -1)"
                  placeholder="请输入" clearable :style='{ "width": "100%" }'>
                </JnpfInput>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="24">
              <jnpf-form-tip-item label="联系人" prop="contacts">
                <JnpfInput v-model="dataForm.contacts" @change="changeData('contacts', -1)" placeholder="请输入" clearable
                  :style='{ "width": "100%" }'>
                </JnpfInput>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="24">
              <jnpf-form-tip-item label="联系人电话" prop="contactsPhone">
                <JnpfInput v-model="dataForm.contactsPhone" @change="changeData('contactsPhone', -1)" placeholder="请输入"
                  clearable :style='{ "width": "100%" }'>
                </JnpfInput>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="24">
              <jnpf-form-tip-item label="电子邮箱" prop="email">
                <JnpfInput v-model="dataForm.email" @change="changeData('email', -1)" placeholder="请输入" clearable
                  :style='{ "width": "100%" }'>
                </JnpfInput>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="24">
              <jnpf-form-tip-item label="企业简介" prop="companyinfo">
                <JnpfTextarea v-model="dataForm.companyinfo" @change="changeData('companyinfo', -1)" placeholder="请输入"
                  :style='{ "width": "100%" }' true type="textarea" :autosize='{ "minRows": 4, "maxRows": 4 }'>
                </JnpfTextarea>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="24">
              <jnpf-form-tip-item label="描述" prop="description">
                <JnpfTextarea v-model="dataForm.description" @change="changeData('description', -1)" placeholder="请输入"
                  :style='{ "width": "100%" }' true type="textarea" :autosize='{ "minRows": 4, "maxRows": 4 }'>
                </JnpfTextarea>
              </jnpf-form-tip-item>
            </el-col>
            <!-- 表单结束 -->
          </template>
        </el-form>
        <SelectDialog v-if="selectDialogVisible" :config="currTableConf" :formData="dataForm" ref="selectDialog"
          @select="addForSelect" @close="selectDialogVisible = false" />
      </el-row>
    </div>
  </div>
</template>


<script>
import request from '@/utils/request'
import { mapGetters } from "vuex";
import axios from 'axios';
import { getDataInterfaceRes } from '@/api/systemData/dataInterface'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
import { getDefaultCurrentValueUserId } from '@/api/permission/user'
import { getDefaultCurrentValueDepartmentId } from '@/api/permission/organize'
import {
  getDateDay,
  getLaterData,
  getBeforeData,
  getBeforeTime,
  getLaterTime
} from '@/components/Generator/utils/index.js'
import { thousandsFormat } from "@/components/Generator/utils/index"

export default {
  components: {},
  props: [],
  data() {
    return {
      dataFormSubmitType: 0,
      continueBtnLoading: false,
      index: 0,
      prevDis: false,
      nextDis: false,
      allList: [],
      visible: false,
      loading: false,
      btnLoading: false,
      formRef: 'formRef',
      setting: {},
      eventType: '',
      userBoxVisible: false,
      selectDialogVisible: false,
      currTableConf: {},
      dataValueAll: {},
      addTableConf: {},
      //可选范围默认值
      ableAll: {},
      tableRows: {},
      Vmodel: "",
      currVmodel: "",
      dataForm: {
        companyName: undefined,
        enterpriseCreditCode: undefined,
        serverType: undefined,
        contacts: undefined,
        contactsPhone: undefined,
        email: undefined,
        companyinfo: undefined,
        description: undefined,
      },
      tableRequiredData: {},
      dataRule:
      {
        companyName: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          },
        ],
        serverType: [
          {
            required: true,
            message: '请选择',
            trigger: 'change'
          },
        ],
        enterpriseCreditCode: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          },
          {
            pattern: /^[0-9A-Z]{18}$/,
            message: '请输入正确的信用代码',
            trigger: 'blur'
          },
        ],
        contacts: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          },
        ],
        contactsPhone: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          },
          {
            pattern: /^1[3456789]\d{9}$|^0\d{2,3}-?\d{7,8}$/,
            message: '请输入正确的联系方式',
            trigger: 'blur'
          },
        ],
        email: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          },
          {
            pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
            // pattern: /^[a-z0-9]+([._\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/,
            message: '请输入正确的邮箱',
            trigger: 'blur'
          },
        ],
        companyinfo: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          },
        ],
      },
      serverTypeOptions: [],
      serverTypeProps: { "label": "fullName", "value": "id" },
      childIndex: -1,
      isEdit: false,
      interfaceRes: {
        companyName: [],
        serverType: [],
        enterpriseCreditCode: [],
        contacts: [],
        contactsPhone: [],
        email: [],
        companyinfo: [],
        description: [],
      },
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  watch: {},
  created() {
    this.dataAll()
    this.initDefaultData()
    this.dataValueAll = JSON.parse(JSON.stringify(this.dataForm))
  },
  mounted() {
  },
  methods: {
    prev() {
      this.index--
      if (this.index === 0) {
        this.prevDis = true
      }
      this.nextDis = false
      for (let index = 0; index < this.allList.length; index++) {
        const element = this.allList[index];
        if (this.index == index) {
          this.getInfo(element.id)
        }
      }
    },
    next() {
      this.index++
      if (this.index === this.allList.length - 1) {
        this.nextDis = true
      }
      this.prevDis = false
      for (let index = 0; index < this.allList.length; index++) {
        const element = this.allList[index];
        if (this.index == index) {
          this.getInfo(element.id)
        }
      }
    },
    getInfo(id) {
      request({
        url: '/api/example/Fz_reg_financial_institution/' + id,
        method: 'get'
      }).then(res => {
        this.dataInfo(res.data)
      });
    },
    goBack() {
      this.visible = false
      this.$emit('refreshDataList', true)
    },
    changeData(model, index) {
      this.isEdit = false
      this.childIndex = index
      let modelAll = model.split("-");
      let faceMode = "";
      for (let i = 0; i < modelAll.length; i++) {
        faceMode += modelAll[i];
      }
      for (let key in this.interfaceRes) {
        if (key != faceMode) {
          let faceReList = this.interfaceRes[key]
          for (let i = 0; i < faceReList.length; i++) {
            if (faceReList[i].relationField == model) {
              let options = 'get' + key + 'Options';
              if (this[options]) {
                this[options]()
              }
              this.changeData(key, index)
            }
          }
        }
      }
    },
    changeDataFormData(type, data, model, index, defaultValue) {
      if (!this.isEdit) {
        if (type == 2) {
          for (let i = 0; i < this.dataForm[data].length; i++) {
            if (index == -1) {
              this.dataForm[data][i][model] = defaultValue
            } else if (index == i) {
              this.dataForm[data][i][model] = defaultValue
            }
          }
        } else {
          this.dataForm[data] = defaultValue
        }
      }
    },
    dataAll() {
      this.getserverTypeOptions();
    },
    getserverTypeOptions() {
      getDictionaryDataSelector('537199823594456197').then(res => {
        this.serverTypeOptions = res.data.list
      })
    },
    clearData() {
      this.dataForm = JSON.parse(JSON.stringify(this.dataValueAll))
    },
    init(id, isDetail, allList) {
      this.prevDis = false
      this.nextDis = false
      this.allList = allList || []
      if (allList.length) {
        this.index = this.allList.findIndex(item => item.id === id)
        if (this.index == 0) {
          this.prevDis = true
        }
        if (this.index == this.allList.length - 1) {
          this.nextDis = true
        }
      } else {
        this.prevDis = true
        this.nextDis = true
      }
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true
          request({
            url: '/api/example/Fz_reg_financial_institution/' + this.dataForm.id,
            method: 'get'
          }).then(res => {
            this.dataInfo(res.data)
            this.loading = false
          });
        } else {
          this.clearData()
          this.initDefaultData()
        }
      });
      this.$store.commit('generator/UPDATE_RELATION_DATA', {})
    },
    //初始化默认数据
    initDefaultData() {

    },
    // 表单提交
    dataFormSubmit(type) {
      const url = `/cloud-api2/fzzxqy/company_reg_status?ecode=${this.dataForm.enterpriseCreditCode}`;
      axios.get(url).then(res => {
        const data = res.data.data;
        if (data.length === 0) {
          this.dataFormSubmitType = type ? type : 0
          this.$refs['formRef'].validate((valid) => {
            if (valid) {
              this.request()
            }
          })
        } else {
          if (data[0].type === '金融机构' && data[0].build_account === '1') {
            this.$message({
              showClose: true,
              message: '该服务商账号已存在！',
              type: 'error'
            });
          } else if (data[0].type === '金融机构' && data[0].build_account !== '1') {
            this.$message({
              showClose: true,
              message: '该金融机构注册申请已提交，请等待审核！',
              type: 'warning'
            });
          } else if (data[0].type !== '金融机构' && data[0].build_account === '1') {
            this.$message({
              showClose: true,
              message: '该账号为' + data[0].type + '账号!',
              type: 'error'
            });
          } else if (data[0].type !== '金融机构' && data[0].build_account !== '1') {
            this.$message({
              showClose: true,
              message: '该账号为' + data[0].type + '待审核账号!',
              type: 'error'
            });
          }
        }
      })
    },
    request() {
      let _data = this.dataList()
      if (this.dataFormSubmitType == 2) {
        this.continueBtnLoading = true
      } else {
        this.btnLoading = true
      }
      if (!this.dataForm.id) {
        request({
          url: '/api/example/Fz_reg_financial_institution',
          method: 'post',
          data: _data
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.clearData()
              this.initDefaultData()
            }
          })
        }).catch(() => {
          this.btnLoading = false
          this.continueBtnLoading = false
        })
      } else {
        request({
          url: '/api/example/Fz_reg_financial_institution/' + this.dataForm.id,
          method: 'PUT',
          data: _data
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1000,
            onClose: () => {
              if (this.dataFormSubmitType == 2) return this.continueBtnLoading = false
              this.visible = false
              this.btnLoading = false
              this.$emit('refresh', true)
            }
          })
        }).catch(() => {
          this.btnLoading = false
          this.continueBtnLoading = false
        })
      }
    },
    openSelectDialog(key) {
      this.currTableConf = this.addTableConf[key]
      this.currVmodel = key
      this.selectDialogVisible = true
      this.$nextTick(() => {
        this.$refs.selectDialog.init()
      })
    },
    addForSelect(data) {
      for (let i = 0; i < data.length; i++) {
        let t = data[i]
        if (this['get' + this.currVmodel]) {
          this['get' + this.currVmodel](t)
        }
      }
    },
    dateTime(timeRule, timeType, timeTarget, timeValueData, dataValue) {
      let timeDataValue = null;
      let timeValue = Number(timeValueData)
      if (timeRule) {
        if (timeType == 1) {
          timeDataValue = timeValue
        } else if (timeType == 2) {
          timeDataValue = dataValue
        } else if (timeType == 3) {
          timeDataValue = new Date().getTime()
        } else if (timeType == 4) {
          let previousDate = '';
          if (timeTarget == 1 || timeTarget == 2) {
            previousDate = getDateDay(timeTarget, timeType, timeValue)
            timeDataValue = new Date(previousDate).getTime()
          } else if (timeTarget == 3) {
            previousDate = getBeforeData(timeValue)
            timeDataValue = new Date(previousDate).getTime()
          } else {
            timeDataValue = getBeforeTime(timeTarget, timeValue).getTime()
          }
        } else if (timeType == 5) {
          let previousDate = '';
          if (timeTarget == 1 || timeTarget == 2) {
            previousDate = getDateDay(timeTarget, timeType, timeValue)
            timeDataValue = new Date(previousDate).getTime()
          } else if (timeTarget == 3) {
            previousDate = getLaterData(timeValue)
            timeDataValue = new Date(previousDate).getTime()
          } else {
            timeDataValue = getLaterTime(timeTarget, timeValue).getTime()
          }
        }
      }
      return timeDataValue;
    },
    time(timeRule, timeType, timeTarget, timeValue, formatType, dataValue) {
      let format = formatType == 'HH:mm' ? 'HH:mm:00' : formatType
      let timeDataValue = null
      if (timeRule) {
        if (timeType == 1) {
          timeDataValue = timeValue || '00:00:00'
          if (timeDataValue.split(':').length == 3) {
            timeDataValue = timeDataValue
          } else {
            timeDataValue = timeDataValue + ':00'
          }
        } else if (timeType == 2) {
          timeDataValue = dataValue
        } else if (timeType == 3) {
          timeDataValue = this.jnpf.toDate(new Date(), format)
        } else if (timeType == 4) {
          let previousDate = '';
          previousDate = getBeforeTime(timeTarget, timeValue)
          timeDataValue = this.jnpf.toDate(previousDate, format)
        } else if (timeType == 5) {
          let previousDate = '';
          previousDate = getLaterTime(timeTarget, timeValue)
          timeDataValue = this.jnpf.toDate(previousDate, format)
        }
      }
      return timeDataValue;
    },
    dataList() {
      var _data = this.dataForm;
      return _data;
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll
      this.dataForm = _dataAll
      this.isEdit = true
      this.dataAll()
      this.childIndex = -1
    },
  },
}

</script>
